
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/navbar.css" rel="stylesheet" />
<link href="css/createevent.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="profile.html">MeteoCal</a><span></span>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <div class="col-sm-3 col-md-3">
        <form class="navbar-form" role="search"  action="search.html" method="GET">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit" ><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="profile.html">User Name</a></li>
      <li><a href="index.html">Logout</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
<div class="container tabbable-panel">
  <form class="form-horizontal" role="form">
    <fieldset>

      <div class="col-md-4">
        <div class="row col-md-offset-1 ">
          <h3>Create Event</h3>
        </div>
      
        <div class="form-group">
          <label class="col-sm-3 control-label" for="event-name">Event name</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="event-name" id="event-name" placeholder="Event name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label" for="event-location">Event location</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="event-location" id="event-location" placeholder="Event location">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label" for="day">Date and time</label>
          <div class="col-sm-9">
            <div class="row">
              <div class="col-md-12">
                <input class="form-control" type="date" name="date" id="date">
              </div>
              <div class="col-md-12">
                  <input class="form-control" type="time" name="time" id="time" value="13:00">
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <label class="col-sm-3 control-label" for="type">Event Type</label>
          <div class="col-sm-9">
            <div class="btn-group" data-toggle="buttons" name="type">
              <label class="btn btn-default active">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Outdoor
              </label>
              <label class="btn btn-default">
                <input type="radio" name="options" id="option2" autocomplete="off"> Indoor
              </label>
            </div>
          </div>
        </div>

        <div class="row">
          <label class="col-sm-3 control-label" for="privacy">Event Privacy</label>
          <div class="col-sm-9">
            <div class="btn-group" data-toggle="buttons" name="privacy">
              <label class="btn btn-default active">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Private
              </label>
              <label class="btn btn-default">
                <input type="radio" name="options" id="option2" autocomplete="off"> Public
              </label>
            </div>
          </div>
        </div>
      </div>


      <div class="col-md-8">
        <!-- right panel -->

        <div class="row">
          <div class="user-search col-md-3">
            <div class="search-form1">
              <span class="icon-search"></span>
              <input class="form-control" type="text" name="search" placeholder="Filter Users..." autocomplete="off">
            </div> <!-- /.search-form1 -->
          </div> <!-- /.user-search -->
        </div>


      <!-- NON INVITED LIST -->
      <!-- =========================== -->

          <div class="col-md-6">
            <div class="section-left panel panel-info">
              <div class="panel-heading">Available people to invite
              </div>
              
              <div class="non-invited panel-body">

                      <span class="user" data-user="1">
                        <!--<span class="glyphicon glyphicon-plus"></span>-->
                        <img src="imgs/forecast/sunny.png" />
                        <span class="name">persona 1</span>
                      </span>

                      <span class="user" data-user="2">
                        <!--<span class="glyphicon glyphicon-plus"></span>-->
                        <img src="imgs/forecast/cloudy.png" />
                        <span class="name">persona 2</span>
                      </span>

                      <div class="end"></div>
                </div>
            </div> <!-- /.user-list -->
          </div>
        <div class="col-md-6">
          <div class="section-right panel panel-success ">
            <div class="panel-heading">Invited people</div> <!-- /.search-header -->

            <div class="invited panel-body">

              <!-- selected users -->
              <!-- =========================== -->

                        <span class="user" data-user="3">
                          <!--<span class="glyphicon glyphicon-remove"></span>-->
                          <img src="imgs/forecast/blizzard.png" />
                          <span class="name">persona 3</span>
                        </span>
                        <div class="end"></div>

              
            </div> <!-- /.modal-body -->
          </div> <!-- /.modal-main -->
          <div class="form-group">
            <div class="col-sm-offset-9 col-sm-1">
              <button type="button" class="btn btn-success">Create</button>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </form>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/createevent.js"></script>